<!DOCTYPE html>
<html lang="zh" mode="light" xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="~{theme/Grace/common :: meta}"></div>
    <meta property="og:title" th:content="${'分类 | ' + #servletContext.getAttribute('configMap')['blog_name']}" />
    <title>分类 | [[${#servletContext.getAttribute('configMap')['blog_name']}]]</title>
    <div th:replace="~{theme/Grace/common :: link}"></div>
</head>

<body>
<!-- 导航 -->
<div th:replace="~{theme/Grace/common :: nav}"></div>
    <div class="wrap" id="wrap">
        <!-- 头部 -->
        <header class="header">
            <!-- 封面 -->
            <div class="cover">
                <span th:if="${#strings.startsWith(currentNav.cover,'http')}">
                    <img class="lazyload" th:data-original="@{${currentNav.cover}}">
                </span>
                <span th:if="${#strings.startsWith(currentNav.cover,'http') == false}">
                    <img class="lazyload" th:data-original="@{${prefix} + '/source/images/category.png'}">
                </span>
            </div>

            <!-- 商标 -->
            <div class="brand animate-box" data-animate-effect="fadeIn">
                <p class="title"><span class="title-head">『</span> 分类 <span class="title-tail">』</span></p>
                <p class="sub-title"></p>
            </div>
        </header>
        <!-- 主要内容 -->
        <main class="main">
            <div class="container">
                <div class="row">
                    <div class="col-md-6" th:each="category,iterStat: ${categoryList}">
                        <section class="category animate-box" data-animate-effect="flipInY">
                            <div class="cover">
                                <img class="lazyload" th:data-original="@{${category.coverUrl}}">
                                <div class="name">[[${category.name}]]</div>
                            </div>
                            <div class="info">
                                <div class="name">[[${category.name}]]</div>
                                <div class="remark">[[${category.remark}]]</div>
                                <div class="post-num">
                                    <svg t="1609338298998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24566" width="16" height="16"><path d="M448 764.586667H267.093333c-17.92 0-32.426667 15.36-32.426666 33.706666 0 18.346667 14.506667 33.706667 32.426666 33.706667h181.333334c17.92 0 31.573333-15.36 31.573333-33.706667 0-18.346667-14.506667-33.706667-32-33.706666zM602.88 600.746667H267.093333c-17.92 0-32.426667 15.36-32.426666 33.706666 0 18.346667 14.506667 33.706667 32.426666 33.706667h336.64c17.92 0 31.573333-15.36 31.573334-33.706667-0.426667-18.346667-14.933333-33.706667-32.426667-33.706666z" p-id="24567"></path><path d="M64 90.88v841.813333c0 38.4 31.146667 69.546667 69.546667 69.546667h756.48c38.4 0 69.546667-31.146667 69.546666-69.546667V90.88c0-38.4-31.146667-69.546667-69.546666-69.546667H133.546667c-38.4 0-69.546667 31.146667-69.546667 69.546667z m659.626667-2.133333v309.76l-75.946667-33.706667c-3.84-2.133333-8.106667-2.56-12.8-2.56s-8.96 1.28-13.226667 3.413333l-72.106666 32.853334V88.746667h174.08z m168.533333 846.08H131.84V89.173333h354.56v360.96c0 11.946667 5.546667 22.613333 14.506667 28.586667 8.96 5.973333 20.053333 7.253333 30.293333 2.56l104.533333-48.213333 107.946667 48.213333c3.84 2.133333 8.106667 2.56 12.8 2.56 6.4 0 11.946667-2.133333 18.346667-5.12 8.96-6.4 14.506667-17.066667 14.506666-28.586667V88.746667h102.826667v846.08z" p-id="24568"></path></svg>
                                <span>[[${category.postNum}]] 篇文章</span>
                            </div>
                            <a data-pjax th:href="@{'/categories/'+${category.name}+'/'}" class="btn">查看</a>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <!-- 尾部 -->
    <div th:replace="~{theme/Grace/common :: footer}"></div>
    <div th:replace="~{theme/Grace/common :: script}"></div>
</body>

</html>
